import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import TableBasic from '../../examples/Table/Basic';
import TableDark from '../../examples/Table/Dark';
import TableResponsive from '../../examples/Table/Responsive';
import TableResponsiveBreakpoints from '../../examples/Table/ResponsiveBreakpoints';
import TableSmall from '../../examples/Table/Small';

# Tables

Use the `striped`, `bordered` and `hover` props to customise the table.

<ReactPlayground codeText={TableBasic} />

## Small Table

Use `size="sm"` to make tables compact by cutting cell padding in half.

<ReactPlayground codeText={TableSmall} />

## Dark Table

Use `variant="dark"` to invert the colors of the table and get light text 
on a dark background.

<ReactPlayground codeText={TableDark} />

## Responsive

Responsive tables allow tables to be scrolled horizontally with ease.

### Always Responsive

Across every breakpoint, use `responsive` for horizontally scrolling tables. 
Responsive tables are wrapped automatically in a `div`. The following example 
has 12 columns that are scrollable horizontally.

<ReactPlayground codeText={TableResponsive} />

### Breakpoint specific

Use `responsive="sm"`, `responsive="md"`, `responsive="lg"`, or `responsive="xl"` 
as needed to create responsive tables up to a particular breakpoint. From that 
breakpoint and up, the table will behave normally and not scroll horizontally.

<ReactPlayground codeText={TableResponsiveBreakpoints} />

## API

<ComponentApi metadata={props.data.Table} />

export const query = graphql`
  query TableQuery {
    Table: componentMetadata(displayName: { eq: "Table" }) {
      ...ComponentApi_metadata
    }
  }
`;
